<template>
  <div class="navmenu">
      <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router>
          <el-submenu index="1">
          <template slot="title">
              <i class="el-icon-location"></i>
              <span>公司信息</span>
          </template>
          <el-menu-item index="/application/company-info">公司简介</el-menu-item>
          <el-menu-item index="1-2">规章制度</el-menu-item>
          <el-menu-item index="1-3">企业管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
          <template slot="title">
              <i class="el-icon-location"></i>
              <span>个人计划</span>
          </template>
          <el-menu-item index="2-1">周计划</el-menu-item>
          <el-menu-item index="2-2">月计划</el-menu-item>
          <el-menu-item index="2-3">年计划</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
          <template slot="title">
              <i class="el-icon-location"></i>
              <span>客户管理</span>
          </template>
          <el-menu-item index="/application/customer-info">客户信息</el-menu-item>
          <el-menu-item index="/application/project-state">项目状态</el-menu-item>
          <el-menu-item index="/application/order-manage">订单管理</el-menu-item>
          </el-submenu>
      </el-menu>
</div>
</template>

<script>

export default {
  // data () {
  //   return {
  //     router: true
  //   }
  // },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .navmenu
    display: block
    position: absolute
    top: 50px
    bottom: 2px
    background: rgb(84,92,100)
    overflow: hidden
    .el-menu-vertical-demo
      width: 200px
</style>
